<!--
 * @Author: 常安民 changanmin1@crdigital.com.cn
 * @Date: 2024-07-29 15:29:30
 * @LastEditors: 常安民 changanmin1@crdigital.com.cn
 * @LastEditTime: 2024-08-05 16:14:20
 * @FilePath: /console-web/src/views/trip/manager/standard/train.vue
 * @Description: 
 * @email:anmin@foxmail.com
 * Copyright (c) 2024 by 华润数科控股有限公司/常安民, All Rights Reserved. 
-->
<template>
  <div>
    
    <FormItem prop="train" :label-width="130" text-align="left" label-position="left">
      <template #label>
        坐席限制
      </template>
      <template>
        <Row> 
         <Col span="22">
           <div style="border-bottom: 1px solid #e9e9e9;padding:0 0 16px 0;margin-bottom:12px;">
             普通列车：
             <CheckboxGroup v-model="crtSeatRestrict" style="margin-top: 12px;" @on-change="handleChangeOrdinaryTrain">
               <Checkbox :disabled="disabled" v-for="item in crtElList" :label="item" :key="item"></Checkbox>
             </CheckboxGroup>
           </div>
           <div style="border-bottom: 1px solid #e9e9e9;padding:0px 0 16px 0;margin-bottom:6px;">
             高铁列车：
             <CheckboxGroup v-model="chsrSeatRestrict" style="margin-top: 12px;" @on-change="handleChangeHighSpeedTrain">
               <Checkbox  :disabled="disabled" v-for="item in chsrElList" :label="item" :key="item"></Checkbox>
             </CheckboxGroup>
           </div>
         </Col>
       </Row>
      </template>
    </FormItem> 
   
    <Row>
      <Col span="6">
        <FormItem prop="train.regionalRestrict" :label-width="130" text-align="left" label-position="left">
          <template #label>
              <Tooltip transfer max-width="400px" placement="top" content="开启将要求火车票出发到达城市与出差申请单严格一致">  行程地管控    
            <Icon type="md-alert" />
          </Tooltip>
          </template> 
          <i-switch  :disabled="disabled" :true-value="'1'" :false-value="'0'" v-model="regionalRestrict" @on-change="handleChangeAddressOnOff">
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </FormItem> 
      </Col><Col span="6">
        <FormItem label="中转管控" prop="train.transferRestrict" :label-width="130" text-align="left" label-position="left"> 
          <i-switch  :disabled="disabled" :true-value="'1'" :false-value="'0'" v-model="transferRestrict" @on-change="handleChangeAddressOnOff">
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </FormItem> 
      </Col>  <Col span="6">
        <FormItem label="候补管控" prop="train.standbyRestrict" :label-width="130" text-align="left" label-position="left"> 
          <i-switch  :disabled="disabled" :true-value="'1'" :false-value="'0'" v-model="standbyRestrict" @on-change="handleChangeAddressOnOff">
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </FormItem> 
      </Col> 
      <Col span="6">
        <FormItem label="日期管控" prop="train.dateRestrict" :label-width="130" text-align="left" label-position="left"> 
          <Row type="flex" :wrap="false">
              <Col style="width: 50px;">
                <i-switch  :disabled="disabled" :true-value="'1'" :false-value="'0'" v-model="dateRestrictRead" @on-change="handleChangeAddressOnOff">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch> 
              </Col>
              <Col style="width:calc(100% - 50px)">
                <Input class="reset-iview-input" v-model="dateRestrict" v-if="dateRestrictRead == '1'" @on-change="handleChangeAddressOnOff" :number="true" >
                  <span slot="prepend" >  前后 </span>
                  <span slot="append">天</span>
                </Input> 
              </Col>
          </Row>
         
        </FormItem>
     
         
      </Col> 
    </Row>
  </div>
</template>

<script>
import valueSetAPI from '@/api/valueSetAPI.js';
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    disabled:{
      type:Boolean,
      default:false,
      required: false,
    },
    value: {
      type: Object,
      required: true,
      default: function() {
        return {  
          crtSeatRestrict:'',
          chsrSeatRestrict:'',
          regionalRestrict:'0', 
          dateRestrict:'0',
          transferRestrict:'0',
          standbyRestrict:'0', 
        }
      }
    }
  },
  created: function() {
    /**
         * data Array<{
           "id": "0df0ddb94e4311ef8d67fa163e8db79e", 
             "vsiKey": "hardseat",
            "vsiParentKey": "trains",     // "highspeedtrains" 高铁  // trains 普通列车  
           "enabled": 1,
           "vsiValue": "硬座", 
         * }>
         */
    valueSetAPI.getValueSetByCode('TRIP_STANDARD_TRAIN_A').then(data => {
      data.map(({ vsiKey, vsiParentKey, vsiValue }) => {
        if (vsiParentKey === 'highspeedtrains') {
          this.chsrElList.push(vsiValue)
        } else if (vsiParentKey === 'trains') {
          this.crtElList.push(vsiValue)
        }
      })
    });
    console.log('this.value :>> ', this.value,this.$data);
  },
  data() {

    return {
      crtSeatRestrict:this.value.crtSeatRestrict && this.value.crtSeatRestrict.split(',') || [],
      chsrSeatRestrict:this.value.chsrSeatRestrict && this.value.chsrSeatRestrict.split(',') || [],
      regionalRestrict:this.value.regionalRestrict, // 城市管控
      dateRestrict:this.value.dateRestrict,// 日期管控
      dateRestrictRead: this.value.dateRestrict == '' || this.value.dateRestrict == '0' ? '0':'1',//日期管控镜像
      transferRestrict:this.value.transferRestrict,// 中转管控
      standbyRestrict:this.value.standbyRestrict,// 候补管控
      crtElList: [],
      chsrElList: []
    }
  },
  methods: {
    handleChangeOrdinaryTrain(names) {
      console.log('names :>> ', names);
      this.changeValue()
    },
    handleChangeHighSpeedTrain(names) {
      console.log('names :>> ', names);
      this.changeValue()
    },
    handleChangeAddressOnOff(val) {
      console.log('names :>> ', val);
      // this.regionalRestrict = val
      this.changeValue()
    },
    changeValue() {
      this.dateRestrict = this.dateRestrictRead == '1' ? this.dateRestrict : '';
      this.$emit('change', {
        crtSeatRestrict:this.crtSeatRestrict.join(','),
        chsrSeatRestrict:this.chsrSeatRestrict.join(','),
        regionalRestrict:this.regionalRestrict,
        dateRestrict:this.dateRestrict,
        transferRestrict:this.transferRestrict,
        standbyRestrict:this.standbyRestrict,
      })
    }
  }
}
</script>

<style scoped lang="less">
.reset-iview-input{
  /deep/ .ivu-input-group-prepend,
  /deep/ .ivu-input-group-append{
    border: 0px;
  }
}
</style>
